<template>
  <div class="tab_list" v-if="is_show">
    <div class="tabs_content">
      <!-- @contextmenu.prevent.native="openContextMenu($event)" -->
      <el-tabs
        closable
        v-model="active"
        type="editable-card"
        @tab-remove="removeTab"
        @tab-click="tabClick"
      >
        <el-tab-pane
          class="isActive"
          v-for="(item, i) in tabList"
          :key="item.path"
          :label="item.name"
          :name="item.path"
        ></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    is_show() {
      return this.tabList.length > 0
    },
  },
  data() {
    return {
      active: '',
      tabList: [],
      // 右键的元素
      contextMenu: {
        name: '',
        menuLeft: 0,
        isShow: false,
        label: '',
      },
    }
  },
  watch: {
    $route: {
      handler(val) {
        this.getThisPage()
      },
      immediate: true,
    },
  },
  created() {
    // 监听页面刷新
    window.addEventListener('beforeunload', (e) => {
      localStorage.setItem(
        'tagInfo2',
        JSON.stringify({
          active: this.active,
          tabList: this.tabList,
        }),
      )
    })
  },
  mounted() {
    const that = this
    document.addEventListener('click', function (e) {
      that.contextMenu.isShow = false
    })
  },
  methods: {
    handContextmenu() {
      this.refs.Contextmenu.visible = true
      this.refs.Contextmenu.show()
    },
    // 判断当前页
    getThisPage() {
      // console.log(this.$route)
      const currentPgae = this.$route
      if (currentPgae.name === 'admin-index' || currentPgae.name == undefined)
        return
      const index = this.tabList.findIndex(
        (tag) => tag.path == currentPgae.path,
      )
      if (index === -1) {
        this.tabList.unshift({
          name: currentPgae.meta,
          path: currentPgae.path,
        })
      } else {
        const currentTab = { name: currentPgae.meta, path: currentPgae.path }
        this.tabList.some((item, index) => {
          if (item.name === currentPgae.meta) {
            this.tabList.splice(index, 1)
            return true
          }
        })
        this.tabList.unshift(currentTab)
      }
      // console.log(this.tabList)
      // 当前选择页
      this.active = currentPgae.path
    },
    // // 右键
    // openContextMenu(e) {
    //   if (e.srcElement.id) {
    //     this.contextMenu.name = e.srcElement.id.substr(4)
    //     this.contextMenu.menuLeft = e.srcElement.getBoundingClientRect().left
    //     this.contextMenu.isShow = true
    //     this.contextMenu.label = e.srcElement.innerText
    //   }
    // },
    // 点击
    tabClick(tab) {
      if (this.$route.path === tab.name) return
      this.$router.push(tab.name)
      this.active = tab.name
    },
    // 移除
    removeTab(targetPath) {
      const tabs = this.tabList
      // if (tabs.length <= 1) {
      //   // this.$message.warning('这是最后一页, 不能在关闭了')
      // } else {
      let activePath = this.active
      if (activePath === targetPath) {
        tabs.forEach((tab, index) => {
          if (tab.path === targetPath) {
            const nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activePath = nextTab.path
            }
          }
        })
      }
      this.active = activePath
      if (tabs.length <= 1) {
        this.$router.push('/home/admin-index/')
      } else {
        this.$router.push(activePath)
      }
      this.tabList = tabs.filter((tab) => tab.path !== targetPath)
      // }
    },
    // 刷新
    refresh() {
      this.$router.go(0)
    },
    // // 关闭右侧
    // closeRightTag() {
    //   const currentPath = this.contextMenu.name
    //   const index = this.tabList.findIndex((tag) => tag.path == currentPath)
    //   this.tabList.splice(index + 1, this.tabList.length - index)
    //   this.active = currentPath
    //   this.$router.push(currentPath)
    // },
    // // 关闭左侧
    // closeLeftTag() {
    //   const currentPath = this.contextMenu.name
    //   const index = this.tabList.findIndex((tag) => tag.path == currentPath)
    //   this.tabList.splice(0, index)
    //   this.active = currentPath
    //   this.$router.push(currentPath)
    // },
    // // 关闭其它
    // closeOtherTag() {
    //   const currentPath = this.contextMenu.name
    //   const currentName = this.contextMenu.label
    //   this.tabList = [
    //     {
    //       name: currentName,
    //       path: currentPath,
    //     },
    //   ]
    //   this.active = currentPath
    //   this.$router.push(currentPath)
    // },
  },
}
</script>

<style lang="less" scoped>
.tab_list {
  padding-top: 3px;
  height: 32px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
}
.tabList-view-container {
  width: 100%;
  background: #f0f2f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
}
.tabs_content {
  width: 100%;
  padding: 0 8px;
  box-sizing: border-box;
}
/deep/.el-tabs__header {
  margin: 0px;
}
/deep/.el-tabs--card > .el-tabs__header {
  border: 0px !important;
}
/deep/.el-tabs__nav {
  border: 0px !important;
}
/deep/.el-tabs__nav-wrap::after {
  height: 0px;
}
/deep/.el-tabs__item {
  margin-right: 4px;
  // border-radius: 4px;
  height: 26px;
  line-height: 24px;
  background: #f7f7f8;
  border: 1px solid #e6e6e9;
  padding: 0 10px !important;
}
/deep/.el-tabs__item.is-active {
  background: #fff;
  border: 1px solid #409eff;
  outline-color: #fff;
}
/deep/.el-tabs__item .el-icon-close {
  margin-left: 8px;
}
/deep/.el-tabs__nav-next,
/deep/.el-tabs__nav-prev {
  line-height: 46px;
  width: 30px;
  text-align: center;
}
/deep/.el-tabs__nav-wrap.is-scrollable {
  padding: 0 30px;
}
</style>
